<style lang="scss" scoped>
.tabs-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	position: relative;
	height: 90rpx;

	.tabs-item {
		flex: 0 1 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		padding: 24rpx 0;
	}

	.tabs-item-active {
		color: $main-primary;
	}

	.tabs-item-line {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 81rpx;
		height: 7rpx;
		background: $main-primary;
		border-radius: 4rpx;
		transform: translateX(-50%);
		transition: all 0.5s ease;
	}
}
</style>

<template>
	<view class="tabs-container">
		<view class="tabs-item" :class="{ 'tabs-item-active': item.id == activeIndex }"
			v-for="(item, index) in tabList" :key="index">
			<view @click="clickTab(item.tabId)">
				{{ item.tabName }}
				<text v-if="item.num || item.num == 0">
					({{ item.num }})
				</text>
			</view>

		</view>
		<view class="tabs-item-line" :style="{ 'left': lineLeft }"></view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
	tabList: {
		type: Array,
		default: []
	},
	activeIndex: {
		type: [Number, String],
		default: 0
	}
});
const emits = defineEmits(["change"]);
const clickTab = (value) => {
	emits("change", value);
};

const lineLeft = computed(()=> ((100 / props.tabList.length) * props.activeIndex) + ((100 / props.tabList.length) / 2) + '%')
// const getLineLeft = () => {
// 	let left = ((100 / props.tabList.length) * props.activeIndex) + ((100 / props.tabList.length) / 2)
// 	console.log(props.tabList.length, props.activeIndex, left);
// 	return left + '%'
// }
// const clickTab = (index) => {
//     flag.value = false
//     setTimeout(() => {
//         flag.value = true
//     }, 200);
//     activeIndex.value = index
//     data.value = index == 0 ? data1.value : (index == 1 ? data2.value : data3.value)
// }
</script>